import React, { Component } from 'react'
import Marked from 'marked'
// @ts-ignore
import Styles from './index.scss'
import hljs from 'highlight.js'

interface StateInterface {

}

interface PropsInterface {
  markedStr: string
}

class MarkedParsing extends Component<PropsInterface, StateInterface> {

  componentWillMount() {
    this.initMarked()
  }

  initMarked() {
    const rendererMD = new Marked.Renderer()
    Marked.setOptions({
      renderer: rendererMD,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false
    })
    Marked.setOptions({
      highlight: function (code) {
        return hljs.highlightAuto(code).value
      }
    })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    const data = Marked(this.props.markedStr);
    return (
      <div className={Styles['w-markdown-parsing']} dangerouslySetInnerHTML={{ __html: data }}></div>
    )
  }
}

export default MarkedParsing